﻿<html>
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="utf-8">
	<title>登录(Login)</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="description" content="">
	<meta name="author" content="">
	<script src="js/jquery.min.js"></script>
</head>
<style type="text/css">
	body {
		background: #f8f8f8;
		text-align: center;
		color: #fff;
		font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
	}

	.page-container {
		width: 350px;
		height: auto;
		margin: 120px auto 0 auto;
	}

	h1 {
		font-size: 30px;
		font-weight: 700;
		text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	}

	form {
		position: relative;
		width: 350px;
		margin: 15px auto 0 auto;
		text-align: center;
	}

	input {
		width: 270px;
		height: 42px;
		margin-top: 25px;
		padding: 0 15px;
		background: #2d2d2d;
		/* browsers that don't support rgba */
		background: rgba(45, 45, 45, .15);
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		border: 1px solid #3d3d3d;
		/* browsers that don't support rgba */
		border: 1px solid rgba(255, 255, 255, .15);
		-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
		-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
		font-family: 'PT Sans', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
		-o-transition: all .2s;
		-moz-transition: all .2s;
		-webkit-transition: all .2s;
		-ms-transition: all .2s;
	}

	input:-moz-placeholder {
		color: #fff;
	}

	input:-ms-input-placeholder {
		color: #fff;
	}

	input::-webkit-input-placeholder {
		color: #fff;
	}

	input:focus {
		outline: none;
		-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
	}

	button {
		cursor: pointer;
		width: 300px;
		height: 44px;
		margin-top: 25px;
		padding: 0;
		background: #ef4300;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		border: 1px solid #ff730e;
		-moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		-webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		font-family: 'PT Sans', Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
		-o-transition: all .2s;
		-moz-transition: all .2s;
		-webkit-transition: all .2s;
		-ms-transition: all .2s;
	}

	button:hover {
		-moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		-webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
	}

	button:active {
		-moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		-webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
		box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1) inset, 0 1px 4px 0 rgba(0, 0, 0, .1);
		border: 0px solid #ef4300;
	}

	.error {
		display: none;
		position: absolute;
		top: 27px;
		right: -55px;
		width: 40px;
		height: 40px;
		background: #2d2d2d;
		/* browsers that don't support rgba */
		background: rgba(45, 45, 45, .25);
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}

	.error span {
		display: inline-block;
		margin-left: 2px;
		font-size: 40px;
		font-weight: 700;
		line-height: 40px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
		-o-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	}

	.connect {
		width: 305px;
		margin: 35px auto 0 auto;
		font-size: 18px;
		font-weight: 700;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	}

	.connect a {
		display: inline-block;
		width: 32px;
		height: 35px;
		margin-top: 15px;
		-o-transition: all .2s;
		-moz-transition: all .2s;
		-webkit-transition: all .2s;
		-ms-transition: all .2s;
	}

	.connect a.facebook {
		background: url(../img/facebook.png) center center no-repeat;
	}

	.connect a.twitter {
		background: url(../img/twitter.png) center center no-repeat;
	}

	.connect a:hover {
		background-position: center bottom;
	}
	/*－－－增加部份的CSS－－－*/

	form,
	input,
	button {
		font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
		text-decoration: none;
		width: 100%;
	}

	button.submit_button {
		font-size: 24px;
		letter-spacing: 15px;
	}

	input.Captcha {
		width: 130px;
		float: left;
	}
</style>

<body>

<div class="page-container">
	<!--	<form action="foot/user/mobileloginGame" method="post">-->
	<input type="text" name="mobilePhone" class="username" placeholder="请输入您的用户名！">
	<input type="password" name="password" class="password" placeholder="请输入您的用户密码！">
	<!--			<p style="background: rgba(45, 45, 45, .15); color: #0094ff;"><span class="back">忘记密码</span></p>
    -->			<button type="button" class="submit_button">登录</button>
	<!--</form>-->
</div>
</body>

</html>
<script type="text/javascript">
    $(function() {
        $('.submit_button').on('click', function() {
            var mobilePhone = $('.username').val();
            var password = $('.password').val();
            $.ajax({
                type: "post",
                url: "foot/user/mobileloginGame",
                data: {
                    'mobilePhone': mobilePhone,
                    'password': password
                },
                success: function(res) {
                    if(res.error_code == 0) {
                        window.location.href = '/footballgame/index.html';
                    } else {
                        alert(res.data);
                        window.location.reload();
                    }
                }
            });
        })
    })
</script>